<template>
  <div>
    <el-main>
      <template>
        <el-table :header-cell-style="{'text-align':'center'}"
                  :cell-style="{'text-align':'center'}"
                  ref="multipleTable"
                  :data="this.pageInfo.data"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @selection-change="handleSelectionChange">
          <el-table-column type="expand">
            <template slot-scope="act">
              <el-carousel height="350px"
                           style="width: 50%">
                <el-carousel-item v-for="photo in act.row.photos"
                                  :key="photo">
                  <el-image style="width: 100%; height: 100%"
                            :src="photo"
                            fit="fill"></el-image>
                </el-carousel-item>
              </el-carousel>
            </template>
          </el-table-column>
          <el-table-column type="selection"
                           width="55">
          </el-table-column>
          <el-table-column label="活动名称"
                           width="80"
                           show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.title }}</template>
          </el-table-column>
          <el-table-column label="报名起止时间"
                           width="180">
            <template slot-scope="scope">{{ scope.row.releaseTime }} <p>至</p> {{ scope.row.endTime }}</template>
          </el-table-column>
          <el-table-column label="活动小区"
                           width="120"
                           show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.community.name }}</template>
          </el-table-column>
          <el-table-column label="内容"
                           width="340"
                           show-overflow-tooltip><template slot-scope="scope">{{scope.row.content}}</template>
          </el-table-column>
          <el-table-column label="报名状态"
                           width="90">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 0">进行中</span>
              <span v-if="scope.row.status == 1">未开始</span>
              <span v-if="scope.row.status == 2">已结束</span>
            </template>
          </el-table-column>
          <el-table-column label="操作"
                           width="250">
            <template slot-scope="scope">
              <el-button type="danger"
                         icon="el-icon-delete"
                         @click="delAct(scope)"
                         circle></el-button>
              <el-button type="primary"
                         icon="el-icon-s-comment"
                         @click="commentsClick(scope)"
                         circle></el-button>
              <el-button type="info"
                         icon="el-icon-user"
                         @click="usersClick(scope)"
                         circle></el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <el-button type="danger"
                     @click="delSelection()">删除选中</el-button>
        </div>
      </template>
      <!-- 活动分页插件 -->
      <el-pagination @size-change="pageSizeChange"
                     @current-change="pageNumChange"
                     :current-page="pageInfo.currentPage"
                     :page-sizes="[5, 10, 15, 20]"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="pageInfo.total"
                     :page-size="pageInfo.size">
      </el-pagination>

      <!-- 评论区对话框 -->
      <el-dialog title=""
                 :visible.sync='commentsVisible'>
        <template>
          <el-table :data="cPageInfo.data">
            <el-table-column type="index"
                             label="序号"
                             align="center"></el-table-column>
            <el-table-column property="releaseTime"
                             label="发布时间"
                             width="100%"></el-table-column>
            <el-table-column property="user.username"
                             align="center"
                             label="发布用户"
                             width="100px"></el-table-column>
            <el-table-column property="content"
                             label="内容"></el-table-column>
            <el-table-column label="操作"
                             width="100%">
              <template slot-scope="scope">
                <el-button type="danger"
                           icon="el-icon-delete"
                           @click="delComment(scope.$index,scope.row)"
                           circle></el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <el-pagination @size-change="cPageSizeChange"
                       @current-change="cPageNumChange"
                       :current-page="cPageInfo.currentPage"
                       :page-sizes="[5, 10, 15, 20]"
                       :page-size="cPageInfo.size"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="cPageInfo.total">
        </el-pagination>

      </el-dialog>
      <!-- 报名信息对话框 -->
      <el-dialog title=""
                 :visible.sync='usersVisible'>
        <el-table :data="uPageInfo.data">
          <el-table-column type="index"
                           label="序号"></el-table-column>
          <el-table-column property="nickname"
                           label="昵称"></el-table-column>
          <el-table-column property="username"
                           label="用户名"></el-table-column>
          <el-table-column label="操作"
                           width="100%">
            <template slot-scope="scope">
              <el-button type="danger"
                         icon="el-icon-delete"
                         @click="delEntry(scope.$index,scope.row)"
                         circle></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="uPageSizeChange"
                       @current-change="uPageNumChange"
                       :current-page="uPageInfo.currentPage"
                       :page-sizes="[5, 10, 15, 20]"
                       :page-size="uPageInfo.size"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="uPageInfo.total">
        </el-pagination>
      </el-dialog>
    </el-main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      /* 多选框项 */
      multipleSelection: [],
      /* 分页信息 */
      cPageInfo: {
        currentPage: 1,
        size: 5,
      },
      pageInfo: {
        currentPage: 1,
        size: 5,
        total: 0,
        totalPage: 1,
        data: [],
      },
      uPageInfo: {
        currentPage: 1,
        size: 5,
      },
      currentActivity: {},
      commentsVisible: false,
      usersVisible: false,
    }
  },
  methods: {
    /* 删除报名信息 */
    delEntry(index, row) {
      this.$axios
        .delete('activity/entry/del/' + row.id + '/' + this.currentActivity.id)
        .then((res) => {
          if (res.data.status == 'SUCCESS') {
            this.uPageInfo.data.splice(index, 1)
            if (
              this.uPageInfo.currentPage != 1 &&
              this.uPageInfo.data.length == 0
            ) {
              this.uPageInfo.currentPage--
            }
            this.getUPageInfo(this.currentActivity.id)
            this.$message.success('删除报名成功')
          } else {
            this.$message.error(res.data.message)
          }
        })
    },
    /* 获取报名表信息 */
    getUPageInfo(aid) {
      this.$axios
        .get(
          'activity/entry/find/' +
            aid +
            '/' +
            this.uPageInfo.currentPage +
            '/' +
            this.uPageInfo.size
        )
        .then((res) => {
          if (res.data.status == 'SUCCESS') {
            this.uPageInfo = res.data.data
            this.usersVisible = true
          } else {
            this.$message.error(res.data.message)
          }
        })
    },
    pageSizeChange(val) {
      this.pageInfo.size = val
      this.getPageInfo()
    },
    pageNumChange(val) {
      this.pageInfo.currentPage = val
      this.getPageInfo()
    },
    uPageSizeChange(val) {
      this.uPageInfo.size = val
      this.getUPageInfo(this.currentActivity.id)
    },
    uPageNumChange(val) {
      this.uPageInfo.currentPage = val
      this.getUPageInfo(this.currentActivity.id)
    },
    cPageNumChange(val) {
      this.cPageInfo.currentPage = val
      this.getCPageInfo(this.currentActivity.id)
    },
    cPageSizeChange(val) {
      this.cPageInfo.size = val
      this.getCPageInfo(this.currentActivity.id)
    },
    /* 删除选中活动 */
    delSelection() {
      let aids = []
      this.multipleSelection.forEach((act) => {
        aids.push(act.id)
      })
      if (aids.length == 0) {
        this.$message.error('未选择活动')
        return
      }
      this.$axios.delete('activity/del', { data: aids }).then((res) => {
        if (res.data.status == 'SUCCESS') {
          this.getPageInfo()
          this.$message.success('活动删除成功')
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    /* 删除活动 */
    delAct(scope) {
      let aid = [scope.row.id]
      this.$axios.delete('activity/del', { data: aid }).then((res) => {
        if (res.data.status == 'SUCCESS') {
          this.getPageInfo()
          this.$message.success('活动删除成功')
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    /* 查看报名表 */
    usersClick(scope) {
      this.currentActivity = this.pageInfo.data[scope.$index]
      this.getUPageInfo(scope.row.id)
    },
    /* 查看评论表 */
    commentsClick(scope) {
      this.currentActivity = this.pageInfo.data[scope.$index]
      this.getCPageInfo(scope.row.id)
      this.commentsVisible = true
    },
    /* 获取评论信息 */
    getCPageInfo(aid) {
      this.$axios
        .get(
          'activity/comment/find/' +
            aid +
            '/' +
            this.cPageInfo.currentPage +
            '/' +
            this.cPageInfo.size
        )
        .then((res) => {
          if (res.data.status == 'SUCCESS') {
            this.cPageInfo = res.data.data
          } else {
            this.$message.error(res.data.message)
          }
        })
    },
    /* 删除评论 */
    delComment(index, row) {
      let cid = [row.id]
      this.$axios.delete('activity/comment/del', { data: cid }).then((res) => {
        if (res.data.status == 'SUCCESS') {
          this.cPageInfo.data.splice(index, 1)
          if (
            this.cPageInfo.currentPage != 1 &&
            this.cPageInfo.data.length == 0
          ) {
            this.cPageInfo.currentPage--
          }
          this.getCPageInfo(row.aid)
          this.$message.success('删除评论成功')
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    getPageInfo() {
      if (this.user == null) {
        this.user = JSON.parse(sessionStorage.getItem('user'))
      }
      /* 获取动态信息刚加载默认查询所有、第一页、5个 */
      this.$axios
        .get(
          'activity/find/0' +
            '/' +
            this.pageInfo.currentPage +
            '/' +
            this.pageInfo.size
        )
        .then((res) => {
          if (res.data.status == 'SUCCESS') {
            //保存数据
            this.pageInfo = res.data.data
            this.pageInfo.data.forEach((activity) => {
              if (activity.photos != null) {
                activity.photos = activity.photos.split(',')
              }
            })
          } else {
            this.$message.error('页面初始化失败')
          }
        })
    },
  },
  mounted() {
    this.getPageInfo()
  },
}
</script>

<style scoped>
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>